<template>
  <view>
    <view class="commentitem" v-for="v in commentuser" :key="v.id">
      <view class="header">
        <view>
          <uv-avatar
            size="24"
            :src="v.tenant_user?.user?.icon"
            shape="square"
          ></uv-avatar>
        </view>
        <view class="header_right">
          <view class="top username">
            <text v-for="_v in v.tenant_user?.user?.name" :key="_v"
              >{{ _v }}
            </text>
          </view>
          <view class="top2">
            <view v-if="user?.tenant_user_id === v.tenant_user?.id">
              <uv-icon
                @click="del(v.id)"
                color="#bbbbbb"
                name="trash"
                size="28"
              ></uv-icon>
            </view>
            <view>
              <text>{{
                dayjs(v.create_time).format("YYYY-MM-DD HH:mm:ss")
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="datacontext">
        {{ v.context }}
      </view>
      <view
        v-if="v.image?.filter((c) => c.type === 'image').length"
        class="imagealbum"
      >
        <uv-album
          :urls="v.image?.filter((c) => c.type === 'image').map((e) => e.url)"
          :multipleSize="'calc(30vw - 16rpx)'"
        ></uv-album>
      </view>
      <view
        class="imagealbum"
        v-else-if="v.image?.filter((c) => c.type === 'video').length"
      >
        <uvVideo :file="v.image?.filter((c) => c.type === 'video')"></uvVideo>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { inject } from "vue";
import dayjs from "dayjs";
import api from "@/api";
import { useI18n } from "vue-i18n";
import uvVideo from "@/components/uv-video/index.vue";
const p = defineProps<{
  commentuser: Eps.commentuserEntity[];
  start: Function;
}>();

const user = inject("user");
const $t = useI18n().t;
function del(id: string) {
  uni.showModal({
    title: $t("删除"),
    content: $t("确定要删除?"),
    success(res) {
      if (res.confirm) {
        api("/wechat/commentuser/delete", { ids: id })
          .then((e) => {
            p.start();
          })
          .catch((f) => {});
      }
    },
  });
}
</script>

<style lang="scss" scoped>
.commentitem {
  background-color: $uni-text-color-inverse;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  align-items: center;
  padding: 36rpx;

  .header {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    width: 100%;

    .header_right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .top {
        height: 43rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-weight: 600;
      }
      .username {
        min-width: 48px;
      }

      .top2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 24rpx;
        color: rgba(170, 170, 170, 1);
      }
    }
  }

  .datacontext {
    font-size: 28rpx;
    color: rgba(102, 102, 102, 1);
    line-height: 40rpx;
    width: 100%;
    word-wrap: break-word;
    word-break: normal;
  }

  .imagealbum {
    width: 100%;
    min-height: 180px;
  }
}
</style>
